<template>
    <a-sub-menu :key="menuInfo.name" v-bind="$props" v-on="$listeners" v-permission="menuInfo.meta.roles">
        <span slot="title">
          <a-icon :type="menuInfo.meta.icon" /><span>{{ menuInfo.meta.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
            <a-menu-item v-if="!item.children" :key="item.path" :title="item.meta.title" v-permission="item.meta.roles">
                <a-icon :type="item.meta.icon" />
                <span>{{ item.meta.title }}</span>
            </a-menu-item>
            <RecursionMenu v-else :key="item.path" :menuInfo="item" v-permission="item.meta.roles" />
        </template>
    </a-sub-menu>
</template>

<script>
  import { Menu } from 'ant-design-vue';
  
  export default {
    name: "RecursionMenu",
    isSubMenu: true,
    props:{
      ...Menu.SubMenu.props,
      // Cannot overlap with properties within Menu.SubMenu.props
      menuInfo: {
        type: Object,
        default: () => ({}),
      },
    },
  }
</script>

<style scoped>

</style>